<template>
	<div class="app-container">
		<!-- 高级查询 -->
		<el-form v-show="searchVisible" ref="queryForm" :model="queryParams" :inline="true">

			<!-- <el-form-item label="仓库:">
				<el-select v-model="queryParams.warehouseCode" filterable clearable placeholder="请选择"
					@change="handleSelectedWarehouse">
					<el-option v-for="item in  options.warehouseCodes" :key="item.id" :label="item.warehouserName"
						:value="item.id">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="库区:">
				<el-select v-model="queryParams.areaCode" clearable placeholder="请选择">
					<el-option v-for="item in  options.areas" :key="item.id" :label="item.areaName" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="选择商品车:" prop="materialNo">
				<el-input v-model="queryParams.materialNo" class="filter-item">
					<i slot="suffix" class="el-input__icon el-icon-search" @click="openMaterialSelector" />
				</el-input>
				<warehouse-customer-selector ref="warehouseCustomerSelector" :visible.sync="materialSelectorVisible"
					@selected="handleMaterialSelected" />
			</el-form-item> -->

			<!-- VIN搜索 -->
			<el-form-item label="VIN号:" prop="vinNos" class="item-flot">
				<el-input v-model="vinNos1" placeholder="多个VIN以逗号或空格分隔" type="textarea" clearable />
			</el-form-item>

			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
				<!-- <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button> -->
			</el-form-item>
			<!-- <el-form-item>
				<el-button type="success" icon="el-icon-top" :disabled="!multipleSelection.length" @click="">还车</el-button>
			</el-form-item> -->
      <!-- <el-form-item>
				<el-button type="warning" icon="el-icon-top" @click="handleQuery">导出</el-button>
			</el-form-item> -->
      <!-- <div style="float: right;">
				<el-button :disabled="!multipleSelection.length" type="info" icon="el-icon-top" @click="fromDialog('车辆外借')">车辆外借</el-button>
				<el-button :disabled="!multipleSelection.length" type="info" icon="el-icon-top" @click="fromDialog('车辆维修')">车辆维修</el-button>
			</div> -->
		</el-form>

    <el-dialog :title="vehiclelnLocationDataFormDialog.title" :visible.sync="vehiclelnLocationDataFormDialog.visible" :close-on-click-modal="false" :before-close="resetFormDialog" width="530px" append-to-body>
      <el-form ref="returnCarFormData" :model="returnCarFormData" :rules="newTbWmsMaterialDeliveryFormRules" label-width="150px ">
          <el-form-item label="整车序列号(VIN码):" prop="vinNo">
          	<el-input v-model="returnCarFormData.receivedLineList[0].vinNo" placeholder="请输入VIN码" />
          </el-form-item>
          <el-form-item label="再次入库日期:" prop="returnCarFormData.returnDate">
            <el-date-picker v-model="returnCarFormData.returnDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择再次入库日期" clearable style="width:100%" />
          </el-form-item>
          <el-form-item label="仓库:" prop="returnCarFormData.stageNo">
            <el-select disabled v-model="returnCarFormData.stageNo" @change="selectChange"
             prop="returnCarFormData.stageNo" placeholder="请选择"  filterable clearable style="width: 100%;">
              <el-option v-for="option in warehouseDate" :key="option.warehouserName" :label="option.warehouserName" :value="option.id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="库区:" prop="returnCarFormData.areaNo">
            <el-select disabled v-model="returnCarFormData.areaNo" @change="selectChange1"
             prop="returnCarFormData.areaNo" placeholder="请选择"  filterable clearable style="width: 100%;">
              <el-option v-for="option in warehouseAreaDate" :key="option.areaName" :label="option.areaName" :value="option.id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="库位:" prop="returnCarFormData.locationNo">
            <el-select disabled v-model="returnCarFormData.locationNo"
             prop="returnCarFormData.locationNo" placeholder="请选择"  filterable clearable style="width: 100%;">
              <el-option v-for="option in locationDate" :key="option.locationName" :label="option.locationName" :value="option.id"/>
            </el-select>
          </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmFormDialog">确 定</el-button>
        <el-button @click="resetFormDialog">取 消</el-button>
      </div>
    </el-dialog>

		<!-- 数据列表 -->
		<el-table v-loading="loading" :data="page.records" highlight-current-row
			@selection-change="handleSelectionChange">
			<!-- <el-table-column type="selection" width="55" align="center" /> -->
			<el-table-column label="序号" type="index" width="55" align="center" />
		  <el-table-column label="整车序列号(VIN码)" align="center" prop="receivedLineList[0].vinNo" />
		  <el-table-column label="品牌" align="center" prop="materialName" />
      <!-- 新增字段 -->
      <!-- <el-table-column label="责任人" align="center" prop="inventoryLending[0].lendCarPerson" /> -->
      <!-- <el-table-column label="维修单位" align="center" prop="inventoryLending[0].repairCompany" /> -->
      <el-table-column label="退库日期" align="center" prop="inventoryLending[0].lendCarDate" />
      <el-table-column label="备注" align="center" prop="inventoryLending[0].remark" />
      <!-- <el-table-column label="附件" align="center" prop="" >
        <template slot-scope="scope">
          <a v-show="scope.row.inventoryLending[0].url" target="_blank" :href="attachUrl('opt/docker/nginx/release/attachment/'+scope.row.inventoryLending[0].url)">查看附件{{attachUrl(scope.row.inventoryLending[0].url)}}</a>
        </template>
      </el-table-column> -->

		  <!-- <el-table-column label="仓库" align="center" prop="" /> -->
		  <!-- <el-table-column label="库区" align="center" prop="" /> -->
		  <!-- <el-table-column label="库位" align="center" prop="locationNo" /> -->
		  <el-table-column label="商品车编号" align="center" prop="materialNo" />
		  <!-- <el-table-column label="应入库日期" align="center" prop="receivedLineList[0].shouldInDate" /> -->
		  <!-- <el-table-column label="实际入库日期" align="center" prop="receivedLineList[0].receivedTime" /> -->
		  <el-table-column label="物料描述" align="center" prop="receivedLineList[0].materialDesc" />
		  <el-table-column label="驾驶室" align="center" prop="receivedLineList[0].driverCabinDesc" />
		  <el-table-column label="变速器型号" align="center" prop="receivedLineList[0].transmission" />
		  <el-table-column label="车型代号" align="center" prop="receivedLineList[0].vehicleModel" />
		  <el-table-column label="发动机号" align="center" prop="receivedLineList[0].engineNo" />
		  <el-table-column label="发动机型号" align="center" prop="receivedLineList[0].engineModel" />
		  <!-- <el-table-column label="DMS订单号" align="center" prop="receivedLineList[0].dmsOrderNo" /> -->
      <!-- 新增字段 -->
      <!-- <el-table-column label="厂区/物流部" align="center" prop="" />
      <el-table-column label="物流公司中心库真实停车位" align="center" prop="" />
      <el-table-column label="物流公司真实入库日期" align="center" prop="" />
      <el-table-column label="物流公司外租库仓库名称" align="center" prop="" />
      <el-table-column label="物流公司外租库真实停车位" align="center" prop="" />
      <el-table-column label="溢库短驳外租库真实日期" align="center" prop="" /> -->
      <el-table-column label="操作" width="150" align="center" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="info" icon="el-icon-top" @click="fromDialog(scope.row)">再次入库</el-button>
        </template>
      </el-table-column>
		</el-table>

		<!-- 分页 -->
		<pagination v-show="page.total>0" :total="page.total" :page.sync="page.current" :limit.sync="page.pageSize"
			@pagination="handleQuery" />

		<!-- 添加/修改对话框 -->
		<!-- <el-dialog :title="tbWmsMaterialInLocationFormDialog.title"
			:visible.sync="tbWmsMaterialInLocationFormDialog.visible" :close-on-click-modal="false" width="500px"
			append-to-body>
			<el-form ref="tbWmsMaterialInLocationForm" :model="tbWmsMaterialInLocationFormData"
				:rules="tbWmsMaterialInLocationFormRules" label-width="80px">
				<el-form-item label="库架编号" prop="locationNo">
					<el-input v-model="tbWmsMaterialInLocationFormData.locationNo" placeholder="请输入库架编号" />
				</el-form-item>
				<el-form-item label="物品编号" prop="materialNo">
					<el-input v-model="tbWmsMaterialInLocationFormData.materialNo" placeholder="请输入物品编号" />
				</el-form-item>
				<el-form-item label="数量" prop="quantity">
					<el-input v-model="tbWmsMaterialInLocationFormData.quantity" placeholder="请输入数量" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="confirmTbWmsMaterialInLocationFormDialog">确 定</el-button>
				<el-button @click="resetTbWmsMaterialInLocationFormDialog">取 消</el-button>
			</div>
		</el-dialog> -->
	</div>
</template>

<script>
	import WarehouseCustomerSelector from '@/views/pms/tWhWarehouseCustomerMaterial/WarehouseCustomerSelector'
	import TbWmsMaterialInLocationApi from '@/api/web/TbWmsMaterialInLocationApi'
	import WarehouseApi from '@/api/basic/WarehouseApi'
	import WarehouseAreaApi from '@/api/web/WarehouseAreaApi'
	import TbWmsLocationApi from '@/api/web/TbWmsLocationApi'
	// import LocationApi from '@/api/basic/LocationApi'
	const defaultTbWmsMaterialInLocationFormData = {
		siteCode: null,
		warehouseCode: null,
		locationNo: null,
		materialNo: null,
		customerNo: null,
		batchNo: null,
		quantity: null,
		validityDate: null,
		version: null,
		checkNo: null,
		lotNo: null,
		cellNo: null,
		customerId: null,
	}
	export default {
		name: 'TbWmsMaterialInLocationList',
		components: {

			WarehouseCustomerSelector

		},
		props: {
			warehouseCode: {
				type: String,
				default: null
			}
		},
		data() {
      var vinNumFn = (rule, value, callback) => {
      	if ((this.returnCarFormData.receivedLineList[0].vinNo.length) !== 17) {
      		return callback(new Error('vin码格式为17位字符'));
      	} else {
      		callback();
      	}
      };
			return {
        warehouseDate: [],
        warehouseAreaDate: [],
        locationDate: [],
        returnCarFormData: {
          type: 'inposition',  // 状态
          materialId: null,  // id
          receivedLineList: [{vinNo:null}], // [0].vinNo
          returnDate: null,  // 再次入库日期
          stageNo: null,  // 仓库
          areaNo: null,  // 库区
          locationNo: null  // 库位
        },
        http: process.env.VUE_APP_BASE_API,
        newTbWmsMaterialDeliveryFormRules:{
          vinNo: [{
          	validator: vinNumFn,
          	trigger: 'blur'
          }, ],
        },  // 校验
        // selectedCarArr: null,  // 选中的车辆数据
        lendCarFormData: {
          ids: null,  // 选中的车辆ID
          type: 'lend',  // 状态 / 外借
          lendCarPerson: null,  // 借车人
          lendCarCompany: null,  // 借车单位
          lendCarDate: null,  // 借车日期
          returnCarDate: null,  // 预计还车日期
          remark: null,  // 备注
        },
        repairCarFormData: {
          ids: null,  // 选中的车辆ID
          type: 'repair',  // 状态 / 维修
          lendCarPerson: null,  // 责任人
          repairCompany: null,  // 维修单位
          lendCarDate: null,  // 维修日期
          remark: null,  // 备注
        },
        vehiclelnLocationDataFormDialog: {
          title: '',
          visible: false,
        },
				options: {
					warehouseCodes: [],
					areas: [],
					sysYnTypeOptions: this.$constant.sysYnTypeOptions
				},
        vinNos1: null,
				queryParams: {
          status: 'refund',  //  状态过滤--------------------------------------------------------------退库
					vinNos: null, // VIN查询
					siteCode: null,
					warehouseCode: null,
					locationNo: null,
					materialNo: null,
					materialName: null,
					customerNo: null,
					batchNo: null,
					quantity: null,
					validityDate: null,
					version: null,
					checkNo: null,
					lotNo: null,
					cellNo: null,
					customerId: null,
					isValid: this.$constant.Y
				},
				page: {
					current: 1,
					pageSize: 10,
					total: 0,
					records: []
				},
				tbWmsMaterialInLocationFormDialog: {
					title: '',
					visible: false
				},
				tbWmsMaterialInLocationFormData: Object.assign({}, defaultTbWmsMaterialInLocationFormData),
				tbWmsMaterialInLocationFormRules: {
					siteCode: [{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}],
					warehouseCode: [{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}],
					locationNo: [{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}],
					materialNo: [{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}],
					customerNo: [{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}],
					quantity: [{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}],
					version: [{
						required: true,
						message: '不能为空',
						trigger: 'blur'
					}],
				},
				loading: true,
				searchVisible: true,
				multipleSelection: [],  ///////////////// 多选框数据
				materialSelectorVisible: false,
				isSingle: true,
				isMultiple: true
			}
		},
		created() {
			this.handleQuery()
			this.loadOptions()
		},
		methods: {
			loadOptions() {
				WarehouseApi.list({warehouseType:'center'}).then(res =>{
				  this.warehouseDate = res.data                                             // 仓库
				})
			  this.warehouseAreaDate= []
			  this.locationDate= []
			  // WarehouseApi.list().then(res =>{
			  //   this.warehouseDate = res.data                                             // 仓库
			  // })
			},
			selectChange(e){
			  WarehouseAreaApi.list({warehouseId:e}).then(res =>{
			    this.warehouseAreaDate = res.data                                          // 库区
			  })
			  this.returnCarFormData.areaNo = null
			  this.returnCarFormData.locationNo = null
			},
			selectChange1(e){
			  console.log(e);
			  TbWmsLocationApi.list({area:e}).then(res =>{
			    console.log(res);
			    if(res.data.length>0){
			      this.isLocationNo = true
			      this.locationDate = res.data.filter(item => item.status == 'empty')          // 库位
			      console.log(this.locationDate);
			    }else{
			      this.isLocationNo = false
			    }
			  })
			  this.returnCarFormData.locationNo = null
			},


			handleAdd() {
				this.openTbWmsMaterialInLocationFormDialog()
			},
			handleRemove(row) {
				const ids = row.id || this.multipleSelection.map(item => item.id)
				this.$confirm('是否确认删除数据?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {
					return TbWmsMaterialInLocationApi.remove(ids)
				}).then(() => {
					this.handleQuery()
					this.$message.success('删除成功')
				})
			},
			handleMaterialSelected(obj) {
				this.queryParams.materialNo = obj.id
			},
			handleEdit(row) {
				const id = row.id || this.multipleSelection.map(item => item.id)[0]
				this.openTbWmsMaterialInLocationFormDialog(id)
			},
			handleQuery() {				this.loading = true        this.queryParams.warehouseCode = this.warehouseCode        ///////////////////////////////////////////////////////////this.queryParams.vinNos是多项VIN查询的数组        if(this.vinNos1 && this.queryParams.vinNos == null ){          this.queryParams.vinNos = this.vinNos1.replace(/[；,，;\s\r\n]+/g, ",").split(",");        } else {          this.queryParams.vinNos = null        }        console.log(this.queryParams.vinNos);  // VIN数组				TbWmsMaterialInLocationApi.page(this.queryParams, this.page).then(response => {          // 赋值          console.log(response.data.records);          console.log(response);					this.page.records = response.data.records					this.page.total = response.data.total					this.loading = false          this.queryParams.vinNos = null				}, () => {					this.loading = false				})			},

			handleSelectedWarehouse(v) {
				let that = this
				if (this.queryParams.warehouseCode != null) {
					WarehouseAreaApi.list({
						warehouseId: v
					}).then(response => {
						that.options.areas = response.data
					})
				}

			},
			handleExport() {
				this.$confirm('是否确认导出数据?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {
					return TbWmsMaterialInLocationApi.exportData(this.queryParams)
				}).then(response => {
					this.$common.download(response.msg)
				})
			},
			openMaterialSelector() {
				this.$refs.warehouseCustomerSelector.loadData()
				this.materialSelectorVisible = true
			},
			openTbWmsMaterialInLocationFormDialog(id) {
				this.resetTbWmsMaterialInLocationFormDialog()
				this.tbWmsMaterialInLocationFormDialog.visible = true
				if (id) {
					this.tbWmsMaterialInLocationFormDialog.title = '货区货物清单-修改'
					TbWmsMaterialInLocationApi.get(id).then(response => {
						this.tbWmsMaterialInLocationFormData = {
							...this.tbWmsMaterialInLocationFormData,
							...response.data
						}
					})
				} else {
					this.tbWmsMaterialInLocationFormDialog.title = '货区货物清单-添加'
				}
			},
			confirmTbWmsMaterialInLocationFormDialog() {
				this.$refs['tbWmsMaterialInLocationForm'].validate(valid => {
					if (valid) {
						if (this.tbWmsMaterialInLocationFormData.id) {
							TbWmsMaterialInLocationApi.edit(this.tbWmsMaterialInLocationFormData).then(
								response => {
									this.$message.success('修改成功')
									this.tbWmsMaterialInLocationFormDialog.visible = false
									this.handleQuery()
								})
						} else {
							TbWmsMaterialInLocationApi.add(this.tbWmsMaterialInLocationFormData).then(response => {
								this.$message.success('添加成功')
								this.tbWmsMaterialInLocationFormDialog.visible = false
								this.handleQuery()
							})
						}
					}
				})
			},
			resetTbWmsMaterialInLocationFormDialog() {
				this.tbWmsMaterialInLocationFormDialog = {
					title: '',
					visible: false
				}
				this.tbWmsMaterialInLocationFormData = Object.assign({}, defaultTbWmsMaterialInLocationFormData)
				this.resetForm('tbWmsMaterialInLocationForm')
			},
			handleSelectionChange(selection) {  // 选择框事件
        console.log(selection);
				this.multipleSelection = selection
				this.isSingle = selection.length !== 1
				this.isMultiple = !selection.length
			},

      fromDialog(row) {            // 点击再次入库
        this.vehiclelnLocationDataFormDialog={
          title: '再次入库',
          visible: true
        }
        this.returnCarFormData.materialId=row.id
        this.returnCarFormData.receivedLineList=row.receivedLineList
        this.returnCarFormData.stageNo=row.warehouseCode
        this.returnCarFormData.areaNo=row.area
        this.returnCarFormData.locationNo=row.locationNo
      },
      resetFormDialog(){   // 取消
        this.vehiclelnLocationDataFormDialog={
          title: '',
          visible: false
        }
        this.returnCarFormData= {
          type: 'inposition',  // 状态
          materialId: null,  // id
          receivedLineList: [{vinNo:null}], // [0].vinNo
          returnDate: null,  // 再次入库日期
          stageNo: null,  // 仓库
          areaNo: null,  // 库区
          locationNo: null  // 库位
        }
        this.handleQuery()
        this.loadOptions()
      },
      confirmFormDialog(){   // 确认（修改数据状态并添加字段）
        console.log('确认',this.returnCarFormData);
        this.$refs['returnCarFormData'].validate(valid => {
          if (valid) {
            TbWmsMaterialInLocationApi.returnCar(this.returnCarFormData).then(
              response => {
                this.$message.success('还车成功')
                this.resetFormDialog()
                this.handleQuery()
                this.loadOptions()
              }
            )
          }
        })
      },



			resetQuery() {
				this.page.current = 1
				this.resetForm('queryForm')
				this.handleQuery()
			}
		}
	}
</script>
